<template>
  <div class="listuser">
    <template v-for="(item, index) in list">
      <div class="fans-div"  :key="item.id" v-show="index<=maxsize && index>=minsize">
        <div class="left">
          <div class="left-left">
            <img src="@/assets/logo.png" alt="" class="img">
          </div>
          <div class="left-right">
            <p>{{ item.name }}</p>
            <p> {{item.ime2}} </p>
          </div>
        </div>
        <div class="right">
          <el-button type="danger" circle @click="btnclick('fans')" v-if="types === 'fans'">拉黑</el-button>
          <el-button type="danger" icon="el-icon-delete" circle v-if="types === 'attention'" @click="btnclick('attention')"></el-button>
        </div>
        
      </div>
    </template>

    <div class="page">
      <el-pagination
        layout="prev, pager, next"
        :total="list.length"
        size="10"
        @current-change="currentchange"
        >
        
      </el-pagination>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    types: {
      type: String
    },
    list: {
      type: Array
    }
  },
  data () {
    return {
      maxsize: 9,
      minsize: 0
    }
  },
  methods: {
    btnclick(value) {
      switch(value) {
        case 'fans':
          this.block()
          break;
        case 'attention':
          this.attentiondelete()
          break;
      }
    },
    block() {
      this.$confirm('是否拉黑？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '拉黑成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消拉黑'
        });          
      });
    },
    attentiondelete() {
      this.$confirm('是否删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    currentchange(page) {
      if (page === 1) {
        this.maxsize = 9
        this.minsize = 0
      } else {
        this.maxsize = 9
        this.minsize = 0
        this.maxsize = (page-1)*10+this.maxsize
        this.minsize = (page-1)*10+this.minsize
      }
      
    }
  }
  
}
</script>

<style lang="scss" scoped>
.listuser {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fans-div{
  width: 100%;
  height: 60px;
  border-radius: 30px;
  background-color: #fff;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  .left{
    display: flex;
    align-items: flex-start;
    .left-left{
      
      .img{
        width: 40px;
        height: 40px;

      }
    }
    .left-right{
      margin-left: 20px;
    }
  }
}
</style>